<template>
  <div v-transfer-dom>
    <transition name="showcover">
      <div class="container" v-show="show">
        <slot></slot>
        <a @click="onHide" class="mask"></a>
      </div>
    </transition>
  </div>

</template>

<script>
  export default {
    name: "popupDown",
    props: {
      value:Boolean,
      targetId:String
    },
    data() {
      return {
        show:this.value,
        offsetTop:0
      }
    },
    watch: {
      value (val) {
        this.show = val
      },
    },
    computed: {},
    methods: {
      onHide(){
        /*this.show=false*/
        this.$emit('input',false)
      },
     /* updatePosition(){
        let height=document.getElementById(this.targetId).offsetHeight
        this.offsetTop=document.getElementById(this.targetId).getBoundingClientRect().top+height
      }*/
    },
    created() {

    },
    mounted() {
      if(this.value){
        this.show=true
      }
     /* setTimeout(()=>{
        this.updatePosition()
      },100)*/
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/public.less";
  .container{
    width: 100%;position: fixed;left: 0;z-index: 503;
    top: 2.27rem;
  }
  .mask{
    display:block;height: 100%;z-index: 502;background: rgba(0,0,0,0.3);width: 100%;position: fixed;left: 0;
  }

</style>
